<pro-header [title]="'权限管理'" xmlns="http://www.w3.org/1999/html"></pro-header>
<nz-card>
    <form nz-form [formGroup]="adminForm">
        <div nz-form-item nz-row [ngStyle]="setStyle()">
            <div nz-form-label nz-col [nzSpan]="3">
                <label nz-form-item-required>账号</label>
            </div>
            <div style="width: 60%; " nz-col>
                <div nz-form-control nz-col [nzSpan]="10" nzHasFeedback>
                    <input nz-input type="text" formControlName="username" placeholder="请输入添加的账号">
                    <div nz-form-explain
                         *ngIf="adminForm.get('username').dirty&&adminForm.get('username').errors">
                        <ng-container
                            *ngIf="adminForm.get('username').hasError('required') || adminForm.get('username').hasError('empty') ">
                            请输入账号！
                        </ng-container>
                        <ng-container *ngIf="adminForm.get('username').hasError('maxlength')">
                            账号最多10位！
                        </ng-container>
                        <ng-container *ngIf="adminForm.get('username').hasError('minlength')">
                            账号不能少于5位！
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
        <div nz-form-item nz-row [ngStyle]="setStyle()">
            <div nz-form-label nz-col nzRequired [nzSpan]="3">
                <label nz-form-item-required>密码</label>
            </div>
            <div style="width: 60%;" nz-col>
                <div nz-form-control nz-col [nzSpan]="10" nzHasFeedback>
                    <input nz-input type="password" formControlName="password" placeholder="请输入添加账号的密码">
                    <div nz-form-explain
                         *ngIf="adminForm.get('password').dirty&&adminForm.get('password').errors">
                        <ng-container
                            *ngIf="adminForm.get('password').hasError('required') || adminForm.get('password').hasError('empty') ">
                            请输入密码！
                        </ng-container>
                        <ng-container *ngIf="adminForm.get('password').hasError('maxlength')">
                            密码最多9位！
                        </ng-container>
                        <ng-container *ngIf="adminForm.get('password').hasError('minlength')">
                            密码最少6位！
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>

        <div nz-form-item nz-row>
            <div nz-form-label nz-col nzRequired [nzSpan]="3">
                <label nz-form-item-required>权限分配</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="12">
                <input type="hidden" formGroupName="roleId">
                <nz-transfer
                    [nzDataSource]="idOfRole"
                    [nzTitles]="['','']"
                    (nzSelectChange)="select($event)"
                    (nzChange)="change($event)">

                </nz-transfer>
            </div>
        </div>

        <div nz-row nz-form-item>
            <div nz-form-label nz-col nzRequired [nzSpan]="3">
            </div>
            <div nz-form-control nz-col [nzSpan]="10" nzHasFeedback>
                <button nz-button nzType="primary" style="margin-right: 8px;" nz-col (click)="submit()"
                        [disabled]="!adminForm.valid">提交
                </button>
                <button nz-button nz-col (click)="back()">返回</button>
            </div>
        </div>
    </form>
</nz-card>
